<template>
  <div class="distribution">
    <!-- 患病人群分布 -->
    <div id="distributionChart"></div>
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let map = new AMap.Map("distributionChart", {
        features: ["bg", "road"],
        mapStyle: "amap://styles/white",
        pitch: 50,
        zoom: 10,
        center: [116.397, 39.9],
        viewMode: "3D",
        skyColor: "#33216a"
      });
      let layer = new Loca.ScatterPointLayer({
        map: map,
        eventSupport: true
      });
      //https://a.amap.com/Loca/static/mock/bj_heat_grid.js
      axios.get("/distributio/findAllDistributio").then(res => {
        let heatGrid = res.data.data;
        heatGrid = JSON.parse(heatGrid.slice(14, heatGrid.length - 1));
        let list = heatGrid.map(function(value) {
          let val = value.split("$");
          return {
            coord: val[1],
            value: +val[0]
          };
        });
        layer.setData(list.slice(0, 5000), {
          lnglat: "coord"
        });
        let colors = ["#0553A1", "#0B79B0", "#10B3B0", "#7CCF98", "#DCE872"];
        layer.setOptions({
          // 设定棱柱体顶点数量, 默认 16，呈现圆柱体
          //vertex: 4,
          // 单位米
          unit: "meter",
          light: {
            // 环境光
            ambient: {
              // 光照颜色
              color: "#ffffff",
              // 光照强度，范围 [0, 1]
              intensity: 0.5
            },
            // 平行光
            directional: {
              color: "#ffffff",
              // 光照方向，是指从地面原点起，光指向的方向。
              // 数组分别表示 X 轴、Y 轴、Z 轴。
              // 其中 X 正向朝东、Y 正向朝南、Z 正向朝地下。
              direction: [1, -1.5, 2],
              intensity: 0.6
            }
          },
          style: {
            // 正多边形半径
            radius: 500,
            height: {
              key: "value",
              value: [0, 50000]
            },
            // 顶边颜色
            color: {
              key: "value",
              scale: "quantile",
              value: colors
            },
            opacity: 0.9,
            // 旋转角度，单位弧度
            rotate: (Math.PI / 180) * 45
          },
          selectStyle: {
            color: "#fcff19",
            opacity: 0.9
          }
        });
        layer.on("mousemove", ev => {
          openInfoWin(map, ev.originalEvent, {
            位置: ev.rawData.coord,
            人数: ev.rawData.value
          });
        });
        layer.render();
      });
    }
  }
};
</script>
<style>
.distribution {
  height: 100%;
  width: 100%;
  position: absolute;
}
#distributionChart {
  height: 100%;
  width: 100%;
}
</style>